<template>
  <view class="client">
    <Mynavbar
      title="客户"
      leftcolor="#fff"
      :placeholder="true"
      color="#000"
      bgColor="#fff"
    />
    <view class="top">
      <view class="data">
        <view class="item">
          <view class="pic"
            ><image
              src="https://oss.xhoven.com/3cea8ee405e3a91bd56dd7ba5586995e.png"
              mode="scaleToFill"
          /></view>
          <view class="num"
            >{{ count.total || 0 }}
            <view class="title">客户</view>
          </view>
        </view>

        <view class="item">
          <view class="pic"
            ><image
              src="https://oss.xhoven.com/656d7d7b1764cdbae0243b7f1a6d259e.png"
              mode="scaleToFill"
          /></view>
          <view class="num"
            >{{ count.already_follow || 0 }}
            <view class="title">已跟进</view>
          </view>
        </view>

        <view class="item">
          <view class="pic"
            ><image
              src="https://oss.xhoven.com/1241a5740f3447f7d2157029ecdd5331.png"
              mode="scaleToFill"
          /></view>
          <view class="num"
            >{{ count.not_follow || 0 }}
            <view class="title">未跟进</view>
          </view>
        </view>

        <view class="item">
          <view class="pic"
            ><image
              src="https://oss.xhoven.com/ac7f44adafdd10be6b43cb0614092653.png"
              mode="scaleToFill"
          /></view>
          <view class="num"
            >{{ count.cancellation || 0 }}
            <view class="title">已核销</view>
          </view>
        </view>
      </view>
      <view class="choose">
        <view
          class="default"
          @click="AllEVent(5)"
          :style="{ color: current == 5 ? '#3E73FE' : '' }"
          >默认排序</view
        >
        <view class="choose-box">
          <view class="choose-box-item" @click="showpopup(1)">
            <view
              class="label"
              :style="{ color: form.from !== '' ? '#3E73FE' : '' }"
              >按来源</view
            >
            <image
              v-if="current == 1"
              src="https://oss.xhoven.com/292491b508ff94cd4779ffb3d65038cd.png"
              mode="scaleToFill"
            />
            <image
              v-else
              src="https://oss.xhoven.com/71a61647797baf0be6bfbba5c5bc5754.png"
              mode="scaleToFill"
            />
          </view>
          <view class="choose-box-item" @click="showpopup(2)">
            <view
              class="label"
              :style="{ color: form.status !== '' ? '#3E73FE' : '' }"
              >按状态</view
            >
            <image
              v-if="current == 2"
              src="https://oss.xhoven.com/292491b508ff94cd4779ffb3d65038cd.png"
              mode="scaleToFill"
            />
            <image
              v-else
              src="https://oss.xhoven.com/71a61647797baf0be6bfbba5c5bc5754.png"
              mode="scaleToFill"
            />
          </view>
          <view class="choose-box-item" @click="showpopup(3)" v-if="bolByMD">
            <view
              class="label"
              :style="{ color: form.business_shop_id !== '' ? '#3E73FE' : '' }"
              >按门店</view
            >
            <image
              v-if="current == 3"
              src="https://oss.xhoven.com/292491b508ff94cd4779ffb3d65038cd.png"
              mode="scaleToFill"
            />
            <image
              v-else
              src="https://oss.xhoven.com/71a61647797baf0be6bfbba5c5bc5754.png"
              mode="scaleToFill"
            />
          </view>
          <view class="choose-box-item" @click="showpopup(4)" v-if="bolByDG">
            <view
              class="label"
              :style="{ color: form.admin_id !== '' ? '#3E73FE' : '' }"
              >按导购</view
            >
            <image
              v-if="current == 4"
              src="https://oss.xhoven.com/292491b508ff94cd4779ffb3d65038cd.png"
              mode="scaleToFill"
            />
            <image
              v-else
              src="https://oss.xhoven.com/71a61647797baf0be6bfbba5c5bc5754.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="mask" v-if="show" @click="close"></view>
        <view class="dropdown" v-if="show">
          <view
            :class="[
              'dropdown-item',
              (form.status === v.value && current == 2) ||
              (form.from == v.value && current == 1) ||
              (form.business_shop_id == v.value && current == 3) ||
              (form.admin_id == v.value && current == 4)
                ? 'active'
                : ''
            ]"
            v-for="(v, i) in statusList"
            :key="i"
            @click="clickEvent(v.value)"
            >{{ v.label }}
            <image
              v-if="
                (form.status === v.value && current == 2) ||
                  (form.from == v.value && current == 1) ||
                  (form.business_shop_id == v.value && current == 3) ||
                  (form.admin_id == v.value && current == 4)
              "
              src="https://oss.xhoven.com/94c335a6fcee833c3a7779458ff527ce.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="body">
      <view class="card" v-for="(v, i) in dataList" :key="i">
        <view class="title">{{ v.title }}</view>
        <view class="list">
          <view
            class="list-item"
            v-for="(j, k) in v.list"
            :key="k"
            @click="listClickEvent(j)"
          >
            <view class="topA">
              <view class="pic">
                <image :src="j.members.avatar" mode="scaleToFill" />
              </view>
              <view class="name">{{ j.members.nickname }}</view>
            </view>
            <view class="bottom">
              <view class="bp-i" v-if="j.is_cancellation">
                <view class="label">已核销</view>
                <image
                  src="https://oss.xhoven.com/e4daccacf5e015278eeb19a06144cffb.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="bp-i" v-else>
                <view class="label">未核销</view>
                <image
                  src="https://oss.xhoven.com/5bf62a0c5cdba1e771bb613a29b3e405.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="bp-i" v-if="j.status == 3">
                <view class="label">已跟进</view>
                <image
                  src="https://oss.xhoven.com/e4daccacf5e015278eeb19a06144cffb.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="bp-i" v-else>
                <view class="label">未跟进</view>
                <image
                  src="https://oss.xhoven.com/5bf62a0c5cdba1e771bb613a29b3e405.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="bp-i" v-if="j.admin_id">
                <view class="label">{{ j.admin }}</view>
                <image
                  src="https://oss.xhoven.com/e4daccacf5e015278eeb19a06144cffb.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="bp-i" v-else>
                <view class="label">未分配</view>
                <image
                  src="https://oss.xhoven.com/5bf62a0c5cdba1e771bb613a29b3e405.png"
                  mode="scaleToFill"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="noneData" v-if="!dataList.length">
        <image
          src="https://oss.xhoven.com/48a6ccec3f450c6bb46bc337646320fd.png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <EditClient ref="editClient" v-model="clientShow" @done="doneEvent" />
    <Tabs />
  </view>
</template>

<script>
import Tabs from '../../components/tabs.vue'
import Mynavbar from '../../components/Mynavbar.vue'
import EditClient from '../../components/editClient.vue'
export default {
  components: { Tabs, Mynavbar, EditClient },
  data () {
    return {
      show: false,
      clientShow: false,
      current: '',
      statusList: [],
      form: {
        status: '',
        from: '',
        business_shop_id: '',
        admin_id: ''
      },
      count: {},
      dataList: [],
      bolByMD: '',
      bolByDG: '',
      page: 1
    }
  },
  onShow () {
    this.AllEVent(5)
  },
  onReachBottom () {
    let num = 0
    this.dataList.forEach(v => {
      num += +v.list.length
    })
    if (num < this.count.total) {
      console.log(this.count.total)
      console.log(num)
      this.page++
      this.getListData(false, false)
    }
  },
  onReady () {
    this.bolByMD =
      uni.getStorageSync('id') !== 8 && !uni.getStorageSync('is_child')
    this.bolByDG =
      uni.getStorageSync('id') == 7 && !uni.getStorageSync('is_child')
    console.log(this.bolByMD, this.bolByDG)
  },
  methods: {
    async doneEvent () {
      uni.showLoading('加载中')
      this.page = 1
      const res = await this.$api.client.List({
        ...this.form,
        page: this.page
      })
      this.dataList = Object.keys(res.data.data).map(v => {
        return {
          title: v + `  (${res.data.data[v].length})人`,
          list: res.data.data[v]
        }
      })
      uni.hideLoading()
    },
    AllEVent (v) {
      this.current = v
      this.form = {
        status: '',
        from: '',
        business_shop_id: '',
        admin_id: ''
      }
      this.show = false
      this.page = 1
      this.getListData(true)
    },
    async showpopup (v) {
      if (this.current === v) {
        this.current = ''
        this.show = false
        return
      }
      if (v == 1) {
        this.statusList = [
          { label: '通过领券', value: 1 },
          { label: '通过分享', value: 2 }
        ]
      } else if (v == 2) {
        this.statusList = [
          { label: '未分配', value: 0 },
          { label: '已分配', value: 1 },
          { label: '未跟进', value: 2 },
          { label: '已跟进', value: 3 }
        ]
      } else if (v == 3) {
        const res = await this.$api.client.shopList()
        this.statusList = res.data.data.map(v => {
          return {
            label: v.name,
            value: v.id
          }
        })
        if (!this.statusList.length) {
          this.statusList = [{ label: '暂无数据', value: 'noData' }]
        }
      } else if (v == 4) {
        const res = await this.$api.my.roleList()
        res.data = res.data.filter(v => v.status)
        this.statusList = res.data.map(v => {
          return {
            label: v.nickname,
            value: v.id
          }
        })
        if (!this.statusList.length) {
          this.statusList = [{ label: '暂无数据', value: 'noData' }]
        }
      }
      this.current = v
      this.show = true
    },
    clickEvent (v) {
      if (v == 'noData') {
        return
      }
      if (this.current == 1) {
        this.form.from = v
        this.form.status = ''
        this.form.business_shop_id = ''
        this.form.admin_id = ''
        this.show = false
        this.current = ''
        this.page = 1
        this.getListData()
      } else if (this.current == 2) {
        this.form.status = v
        this.form.from = ''
        this.form.business_shop_id = ''
        this.form.admin_id = ''
        this.show = false
        this.current = ''
        this.page = 1
        this.getListData()
      } else if (this.current == 3) {
        this.form.business_shop_id = v
        this.form.status = ''
        this.form.from = ''
        this.form.admin_id = ''
        this.show = false
        this.current = ''
        this.page = 1
        this.getListData()
      } else if (this.current == 4) {
        this.form.admin_id = v
        this.form.status = ''
        this.form.from = ''
        this.form.business_shop_id = ''
        this.show = false
        this.page = 1
        this.getListData()
      }
    },
    async getListData (bol = false, reset = true) {
      uni.showLoading('加载中')
      const res = await this.$api.client.List({
        ...this.form,
        page: this.page
      })
      if (bol) this.count = res.data.count
      this.dataList = reset
        ? Object.keys(res.data.data).map(v => {
            return {
              title: v + `  (${res.data.data[v].length})人`,
              list: res.data.data[v]
            }
          })
        : [
            ...this.dataList,
            ...Object.keys(res.data.data).map(v => {
              return {
                title: v + `  (${res.data.data[v].length})人`,
                list: res.data.data[v]
              }
            })
          ]
      uni.hideLoading()
    },
    close () {
      this.current = ''
      this.show = false
    },
    listClickEvent (v) {
      this.clientShow = true
      this.$refs.editClient.setinfo(v)
    }
  }
}
</script>

<style lang="less" scoped>
.client {
  min-height: 100vh;
  background-color: #f7f7f7;
  .top {
    height: 340rpx;
    padding: 0 30rpx;
    background-color: #fff;
    .data {
      height: 250rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid #f2f2f2;
      .item {
        position: relative;
        width: 160rpx;
        height: 170rpx;
        margin-right: 18rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        &:last-child {
          margin-right: 0;
        }
        .pic {
          width: 160rpx;
          height: 170rpx;
          position: absolute;
          top: 0;
          left: 0;
        }
        .num {
          font-weight: 600;
          font-size: 35rpx;
          position: relative;
          .title {
            position: absolute;
            top: 55rpx;
            left: 50%;
            width: 100rpx;
            margin-left: -50rpx;
            text-align: center;
            color: #808080;
            font-size: 25rpx;
          }
        }
      }
    }
    .choose {
      display: flex;
      align-items: center;
      height: 88rpx;
      width: 100%;
      justify-content: space-between;
      position: relative;
      .default {
        font-size: 26rpx;
      }
      .choose-box {
        display: flex;
        align-items: center;
        .choose-box-item {
          margin-right: 48rpx;
          display: flex;
          align-items: center;
          &:last-child {
            margin-right: 0;
          }
          .label {
            font-size: 25rpx;
            margin-right: 10rpx;
          }
          image {
            width: 16rpx !important;
            height: 16rpx !important;
          }
        }
      }
      .dropdown {
        position: absolute;
        top: 88rpx;
        left: -30rpx;
        width: 750rpx;
        background-color: #fff;
        border-radius: 0 0 20rpx 20rpx;
        padding: 0 30rpx;
        z-index: 12;
        // max-height: 600rpx;
        overflow-y: 'scroll';
        .dropdown-item {
          height: 90rpx;
          border-bottom: 1px solid #f7f7f7;
          display: flex;
          align-items: center;
          font-size: 26rpx;
          image {
            width: 28rpx !important;
            height: 28rpx !important;
          }
          &:last-child {
            border-bottom: 0;
          }
        }
        .active {
          color: #3e73fe;
          justify-content: space-between;
        }
      }
      .mask {
        position: absolute;
        top: 88rpx;
        left: -30rpx;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 11;
      }
    }
  }
  .body {
    padding: 30rpx;
    .card {
      margin-bottom: 30rpx;
      .title {
        font-size: 30rpx;
        font-weight: 600;
        margin-bottom: 30rpx;
      }
      .list {
        .list-item {
          height: 161rpx;
          width: 100%;
          padding: 0 30rpx;
          background-color: #fff;
          border-radius: 10rpx;
          margin-bottom: 18rpx;
          &:last-child {
            margin-bottom: 0;
          }
          .topA {
            height: 90rpx;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f2f2f2;
            .pic {
              width: 50rpx;
              height: 50rpx;
              margin-right: 20rpx;
              border-radius: 50rpx;
              overflow: hidden;
            }
            .name {
              font-size: 26rpx;
              color: #333333;
              font-weight: 600;
            }
          }
          .bottom {
            height: 70rpx;
            display: flex;
            align-items: center;
            .bp-i {
              display: flex;
              align-items: center;
              justify-content: center;
              flex: 1;
              .label {
                font-size: 22rpx;
                margin-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                letter-spacing: 2rpx;
                text-overflow: ellipsis;
                max-width: 165rpx;
              }
              image {
                width: 22rpx !important;
                height: 22rpx !important;
              }
            }
          }
        }
      }
    }
    .noneData {
      width: 690rpx;
      height: 690rpx;
      position: relative;
      &::after {
        content: '暂无数据';
        font-size: 30rpx;
        letter-spacing: 4rpx;
        position: absolute;
        bottom: 200rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
